;
(function ($) {
    // 默认设置
    var defaults = {
        speed: 1000,
        interval: 2000
    }

    function Banner(ele, options) {
        this.element = $(ele);
        // 合并设置项
        this.options = $.extend({}, defaults, options);
        this.imgs = $(ele).find(".imgs");
        // this.cont = $(ele).children().first();
        this.cont = $(ele).children(".imgs").children("li").first();
        // this.firstChild = $(ele).children().first().find('li:first');
        this.firstChild = $(ele).children(".imgs").children("li").first().find("a:first");
        // this.Width = this.firstChild.width();
        this.width = $(ele).width();
        this.n = 0;
        // this.len = $(ele).children().first().find('ul li').length;
        this.len = $(ele).children(".imgs").children("li").first().find("a").length;
        this.timer = null;
        this.flag = true;
        // this.init();
    }

    // 初始化
    Banner.prototype.init = function () {
        var self = this;
        (function () {
            // 克隆图片，设置图片盒子的宽度
            // self.cont.find('ul').append(self.firstChild.clone(true));
            self.cont.append(self.firstChild.clone(true));
            self.imgs.css({
                // width: self.Width * (self.len + 1)
                width: 702
            });
            // 生成对应的按钮
            for (var i = 0; i < self.len; i++) {
                $('<li><div class="blackblock"></div></li>').appendTo(self.element.find('.condition'));
            }
        })()
        // console.log(this);
        // console.log(this.len)
        this.nextClick();
        this.preClick();
        this.btnClick();
        this.autoPlay();
        this.clearPlay(this.element);
    }

    Banner.prototype.nextClick = function () {
        var self = this;
        this.element.find('.next').click(function () {
            // console.log('hello')
            self.moveNext();
        })
    }

    Banner.prototype.moveNext = function () {
        //    var self = this;
        this.n++;
        // console.log(this.n);
        if (this.n > this.len) {
            this.n = 1;
            this.imgs.css({
                // marginLeft: 0
                left: 0
            });
        }
        if(this.flag){
            this.changeBtn(this.n > 3 ? 0 : this.n);
        }
        this.imgs.animate({
            // marginLeft: -this.Width * this.n
            left: -234 * this.n
        }, this.options.speed, function () {
            //    if(flag){
            //     timer = setTimeout(function () {
            //         $('.next').click();
            //     }, 3000);
            //    }
        })
    }

    // 点击切换上一张图片
    Banner.prototype.preClick = function () {
        var self = this;
        this.element.find('.pre').click(function () {
            self.n--;
            if (self.n < 0) {
                self.n = self.len - 1;
                self.cont.css({
                    // marginLeft: -(self.len) * self.Width
                    // left: -(self.len) * self.Width
                    left: -234 * (-self.len)
                });
            }
            self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
            self.imgs.animate({
                // marginLeft: -self.Width * self.n
                left: -234 * self.n
                // left:-this.Width * this.n
            }, self.options.speed)
        })
    }
    Banner.prototype.btnClick = function () {
        var self = this;
        // 点击点切换图片
        this.element.find('.condition li').click(function () {
            var index = $(this).index();
            self.n = index;
            self.changeBtn1(index);
            self.imgs.animate({
                // marginLeft: -self.Width * index
                left: -234 * index
            }, self.options.speed)
        })
    }

    Banner.prototype.changeBtn1 = function (index){
        if (this.n == this.len) {
            this.element.find('.condition li').eq(0).children(".blackblock").css("width","30px").parent().siblings().children(".blackblock").css("width","0");
        } else {
            this.element.find('.condition li').eq(index).children(".blackblock").css("width","30px").parent().siblings().children(".blackblock").css("width","0");
        }
    }

    Banner.prototype.changeBtn = function (index) {
        // this.element.find('.btn li').eq(index).addClass('active').siblings().removeClass('active');
        if (this.n == this.len) {
            this.element.find('.condition li').eq(0).children(".blackblock").stop().animate({
                width: "30px"
            }, 2000, function () {
                $(this).css("width", 0)
            }).parent().siblings().children(".blackblock").css("width","0");
        } else {
            this.element.find('.condition li').eq(index).children(".blackblock").stop().animate({
                width: "30px"
            }, 2000, function () {
                $(this).css("width", 0)
            }).parent().siblings().children(".blackblock").css("width","0");
        }
    }

    Banner.prototype.autoPlay = function () {
        var self = this;
        // 计时器中调用函数是，函数中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
        //     self.moveNext();
        // },2000);
        // 不能直接使用  self.timer = setInterval(self.moveNext(),2000); 形式
        self.timer = setInterval(function () {
            self.moveNext();
        }, self.options.interval);
    }

    // 清除自动播放
    Banner.prototype.clearPlay = function (ele) {
        var self = this;
        // 清除自动播放
        //    console.log(ele)
        $(ele).mouseover(function () {
            console.log('hello world');
            clearInterval(self.timer);
            self.flag = false;
            // if(!flag){
            //     self.n = index;
            //     this.changeBtn1(index);
            // }    
        }).mouseout(function () {
            self.flag = true;
            self.timer = setInterval(function () {
                self.moveNext();
            }, self.options.interval);
        })
    }

    $.fn.myBanner = function (params) {
        var banner = new Banner(this, params);
        banner.init();
        // 如果需要链式调用
        return this;
        // return this.each(function(){})
    }
})(jQuery)